<template>
  <el-container style="height: 100%">
    <el-aside style="height: 100%;border-right: 1px solid #e6e6e6" width="210px">
      <el-menu :router="true"
               mode="vertical"
               text-color="#000"
               :default-active="activePath">
        <!-- 一级菜单 -->
        <el-submenu v-for="(item, index) in menuList" :key="item.id" :index="item.name">
          <template slot="title">
            <!-- 图标 -->
            <i class="el-icon-menu"></i>
            <!-- 文本 -->
            <span style="font-family: 微软雅黑,serif">{{ item.text }}</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="subItem.path"
                        @click="handleItemClick(subItem)">
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-menu"></i>
              <!-- 文本 -->
              <span style="font-family: 微软雅黑,serif">{{ subItem.text }}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</template>

<script>
import {$SysMenuApi} from "@/network/menu/SysMenuApi";

export default {

  name: "SystemSetting",
  data() {
    return {
      activePath: "",
      menuList: [],
    }
  },

  methods: {
    handleItemClick(item) {
      this.$store.commit("NavBar/setActivePath", item.path);
      this.activePath = item.path;
    },

    async getSideMenuList() {
      let path = this.$route.path.split("/")[1];
      let res = await $SysMenuApi.getMenuData();
      let menuData = res.data;
      this.menuList = menuData[path];
    },



  },

  computed: {

  },

  created() {
    this.getSideMenuList();
    this.activePath = this.$store.getters["NavBar/getActivePath"];
  }


}
</script>

<style scoped>
.el-menu {
  border-right: none;
}

.el-menu-item.is-active {
  background-color: #ecf5ff !important;
}

</style>